import { Divider, Select, Typography } from "antd";
import axios from "axios";
import dateFormat from "dateformat";
import { useEffect, useState } from "react";
import { API } from "../../config";
import { isAuth } from "../../helpers/auth";
import Layout from "./Layout";

const { Title } = Typography

export default function Ordere() {
    const [orders, setorders] = useState([])
    async function loadorders() {
        const { data } = await axios.get(`${API}/order/list/${isAuth().user._id}`, {
            headers: {
                Authorization: `Bearer ${isAuth().token}`
            }
        })
        setorders(data)
    }
    useEffect(() => {

        loadorders()
    }, [])

    const getOrderNumber = () => {
        return orders.length > 0 ? `您订单的数量是${orders.length}` : `您还没有订单`
    }
    const showStatus = status => {
        switch (status) {
            case "Unpait":
                return '未支付'
            case 'Paid':
                return '已支付'
            case 'Shipped':
                return '运输中'
            case 'Competed':
                return '已完成'
            case 'Cancelled':
                return '已取消'
            default:
                return
        }
    }
    const handleChange = orderId => status => {
        axios.put(`${API}/order/status/${isAuth().user._id}`, {
            orderId, status
        }, {
            headers: {
                Authorization: `Bearer ${isAuth().token}`
            }
        }).then(() => loadorders())
        
    }
    return (
        <Layout title='订单列表' subTitle={getOrderNumber()}>
            {
                orders.map(order => (
                    <div key={order._id}>
                        <Title>订单ID:{order._id}</Title>
                        <table style={{ width: "100%" }}>
                            <thead className="ant-table-thead">
                                <tr>
                                    <th className="ant-table-cell">订单状态</th>
                                    <th className="ant-table-cell">订单号</th>
                                    <th className="ant-table-cell">总价</th>
                                    <th className="ant-table-cell">创建时间</th>
                                    <th className="ant-table-cell">邮寄地址</th>
                                    <th className="ant-table-cell">客户姓名</th>
                                </tr>
                            </thead>
                            <tbody className="ant-table-tbody">
                                <tr className="ant-table-row">
                                    <td className="ant-table-cell">
                                        {showStatus(order.status)}
                                        <Select onChange={handleChange(order._id)} defaultValue={order.status}>
                                            <Select.Option value='Unpaid'>未支付</Select.Option>
                                            <Select.Option value='Paid'>已支付</Select.Option>
                                            <Select.Option value='Shipped'>运输中</Select.Option>
                                            <Select.Option value='Completed'>已完成</Select.Option>
                                            <Select.Option value='Cancelled'>已取消</Select.Option>
                                        </Select>
                                    </td>
                                    <td className="ant-table-cell">
                                        {order.trade_no}
                                    </td>
                                    <td className="ant-table-cell">
                                        {order.amount}
                                    </td>
                                    <td className="ant-table-cell">
                                        {dateFormat(order.createdAt, 'yyyy-mm-dd')}
                                    </td>
                                    <td className="ant-table-cell">
                                        {order.address}
                                    </td>
                                    <td className="ant-table-cell">
                                        {'乔峰'}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table style={{ width: "100%" }}>
                            <thead className="ant-table-thead">
                                <tr>
                                    <th className="ant-table-cell">商品名称</th>
                                    <th className="ant-table-cell">商品价格</th>
                                    <th className="ant-table-cell">商品数量</th>
                                    <th className="ant-table-cell">商品ID</th>
                                </tr>
                            </thead>
                            <tbody className="ant-table-tbody">
                                {order.products.map(product => (
                                    <tr key={product._id} className="ant-table-row">
                                        <td className="ant-table-cell">
                                            {product.product.name}
                                        </td>
                                        <td className="ant-table-cell">
                                            {product.product.price}</td>
                                        <td className="ant-table-cell">
                                            {product.count}</td>
                                        <td className="ant-table-cell">
                                            {product.product._id}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                        <Divider />
                    </div>
                ))
            }
        </Layout>
    )
}